
<title>Puzzle Admin-菜单管理</title>

<!-- ajax layout which only needs content area -->
<div class="page-header">
    <h1>
        菜单管理
    </h1>
</div><!-- /.page-header -->

<div class="row" id="">
    <div class="col-xs-12">

        <table id="treegrid"></table>

        <div id="gridpager"></div>

        <script type="text/javascript">
            var $path_base = "../..";//in Ace demo this will be used for editurl parameter
        </script>

        <!-- PAGE CONTENT ENDS -->
    </div><!-- /.col -->
</div><!-- /.row -->

<!-- page specific plugin scripts -->
<script type="text/javascript">
var scripts = [null, null];
$('.page-content-area').ace_ajax('loadScripts', scripts, function() {
    var menuSelect = "0:请选择上级{{foreach from=$menuList item=menuItem key=index}};{{$menuItem.menuId}}:{{$menuItem.menuName}}{{/foreach}}";

    jQuery(function($) {
        jQuery(window).on('resize.jqGrid', function () {
            $("#treegrid").jqGrid( 'setGridWidth', $(".row").width() - 20 )
                          .jqGrid( 'setGridHeight', $(window).height() - 260);
        });
        jQuery("#treegrid").jqGrid({
            datatype: "json",
            treedatatype: "json",
            url: 'menu/list.do',
            mtype: "POST",

            colNames:['编号','名称','地址','上级菜单','是否有效','排序号', '操作'],
            colModel:[
                {name:'menuId',index:'menuId', width:60, fixed:true, resize:false, sortable:false, key: true, align:"center" },
                {name:'menuName',index:'menuName', sortable:false, sorttype:"text", editable: true },
                {name:'menuUrl',index:'menuUrl', sortable:false, sorttype:"text", editable: true  },
                {name:'parentId',index:'parentId', text:'parentName', width:100, fixed:true, sortable:false, align:"center", editable: true, edittype:"select",editoptions:{value:menuSelect}},

                {name:'status',index:'status', width:80, fixed:true, resize:false, sortable:false, align:"center", editable: true, edittype:"checkbox",editoptions: {value:"1:0"},

                    formatter: function(ts, opts, rdat, act){
                        return ts == 1 ? "是" : "否";
                    },

                    unformat: function(cellvalue, options, cell) {
                        setTimeout(function(){
                            $(cell) .find('input[type=checkbox]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
                            if(cellvalue == "是"){
                                $(cell) .find('input[type=checkbox]').attr("checked", true);
                            }
                        }, 0);
                    }
                },
                {name:'sortOrder',index:'sortOrder', width:60, fixed:true, resize:false, sortable:false, sorttype:"int", editable: true, align:"center" },
                {name:'action',index:'', width:80, fixed:true, sortable:false, resize:false,

                    formatter:'actions',
                    formatoptions:{
                        keys:true,
                        delbutton: true,
                        delOptions:{
                            recreateForm: true,
                            beforeShowForm:beforeDeleteCallback,
                            afterComplete:function(response){
                                console.log("action afterDeleteComplete");
                            }
                        },
                        editbutton:true,
                        editOptions:{
                            recreateForm: true,
                            beforeShowForm:beforeEditCallback
                        },
                        afterSave: function(rowId, response){
							console.log("action afterSave");
                            $(this).trigger("reloadGrid");
                        },
						onSuccess: function(){
							console.log("action onSuccess");
						},
						onError: function(){
							console.log("action onError");
						}
                    }
                }
            ],

            autowidth: true,
            width: ($("#row").width() - 20),
            height: ($(window).height() - 260),
            pager : '#gridpager',
            treeGrid: true,
            treeGridModel: 'adjacency',
            ExpandColumn : 'menuName',
            ExpandColClick: true,
            treeIcons: {
                leaf: 'ace-icon fa fa-book blue',
                plus: 'icon-folder ace-icon fa fa-folder blue',
                minus: 'icon-folder ace-icon fa fa-folder-open blue'
            },
            editurl:'menu/action.do',
            jsonReader: {
                root: "data",
                repeatitems : false,
                id: "menuId"
            },
            loadtext: "正在加载...",
            treeReader : {
                level_field: "level",
                parent_id_field: "parentId",
                leaf_field: "isLeaf",
                expanded_field: "expanded"
            },
            forceFit: true,
            shrinkToFit: true,
            loadComplete : function() {
                var table = this;
                setTimeout(function(){
                    styleCheckbox(table);

                    updateActionIcons(table);
                    updatePagerIcons(table);
                    enableTooltips(table);
                }, 0);
                var containerHeight = $(".ui-jqgrid-bdiv").height(),
                        gridHeight = $("#treegrid").height();
                if(containerHeight > gridHeight){
                    $(".ui-jqgrid-hbox").addClass("no-padding");
                }
            },
            gridComplete: function(){
                console.log("grid gridComplete");
            },
            afterComplete: function(response){
                console.log("grid afterComplete");
            },
            prmNames:{ 
				addoper:"create",
				deloper:"delete", 
				editoper:"update" 
			},
			jqGridInlineSuccessSaveRow: function(res, rowid, o){
				var result = jQuery.parseJSON(res.responseText);
				if(result.code == 0){
					return [true, result.data];
				}
				return [false];
			}
        });


        jQuery("#treegrid").jqGrid('navGrid', "#gridpager",
                { 	//navbar options
                    edit: true,
                    editicon : 'ace-icon fa fa-pencil blue',
                    add: true,
                    addicon : 'ace-icon fa fa-plus-circle purple',
                    del: true,
                    delicon : 'ace-icon fa fa-trash-o red',
                    refresh: true,
                    refreshicon : 'ace-icon fa fa-refresh green',
                    search: false,
                    searchicon : 'ace-icon fa fa-search orange',
                    view: true,
                    viewicon : 'ace-icon fa fa-search-plus grey',
                },
                {
                    //edit record form
                    closeAfterEdit: true,
                    width: 700,
                    recreateForm: true,
                    beforeShowForm : function(e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //new record form
                    width: 600,
                    left: ((jQuery(window).width() - 600) / 2),
                    top: 200,
                    closeAfterAdd: true,
                    recreateForm: true,
                    viewPagerButtons: false,
                    beforeShowForm : function(e) {
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar')
                                .wrapInner('<div class="widget-header" />')
                        style_edit_form(form);
                    }
                },
                {
                    //delete record form
                    recreateForm: true,
                    beforeShowForm : function(e) {
                        var form = $(e[0]);
                        if(form.data('styled')) return false;

                        form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
                        style_delete_form(form);

                        form.data('styled', true);
                    },
                    onClick : function(e) {
                        //alert(1);
                    }
                },
                {
                    //view record form
                    recreateForm: true,
                    beforeShowForm: function(e){
                        var form = $(e[0]);
                        form.closest('.ui-jqdialog').find('.ui-jqdialog-title').wrap('<div class="widget-header" />')
                    }
                }
        )
        /**/


        function style_edit_form(form) {
            //enable datepicker on "sdate" field and switches for "stock" field
            form.find('input[name=sdate]').datepicker({format:'yyyy-mm-dd' , autoclose:true})

            form.find('input[name=stock]').addClass('ace ace-switch ace-switch-5').after('<span class="lbl"></span>');
            //don't wrap inside a label element, the checkbox value won't be submitted (POST'ed)
            //.addClass('ace ace-switch ace-switch-5').wrap('<label class="inline" />').after('<span class="lbl"></span>');


            //update buttons classes
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm').find('[class*="-icon"]').hide();//ui-icon, s-icon
            buttons.eq(0).addClass('btn-primary').prepend('<i class="ace-icon fa fa-check"></i>');
            buttons.eq(1).prepend('<i class="ace-icon fa fa-times"></i>')

            buttons = form.next().find('.navButton a');
            buttons.find('.ui-icon').hide();
            buttons.eq(0).append('<i class="ace-icon fa fa-chevron-left"></i>');
            buttons.eq(1).append('<i class="ace-icon fa fa-chevron-right"></i>');
        }

        function style_delete_form(form) {
            var buttons = form.next().find('.EditButton .fm-button');
            buttons.addClass('btn btn-sm btn-white btn-round').find('[class*="-icon"]').hide();//ui-icon, s-icon
            buttons.eq(0).addClass('btn-danger').prepend('<i class="ace-icon fa fa-trash-o"></i>');
            buttons.eq(1).addClass('btn-default').prepend('<i class="ace-icon fa fa-times"></i>')
        }

        function style_search_filters(form) {
            form.find('.delete-rule').val('X');
            form.find('.add-rule').addClass('btn btn-xs btn-primary');
            form.find('.add-group').addClass('btn btn-xs btn-success');
            form.find('.delete-group').addClass('btn btn-xs btn-danger');
        }
        function style_search_form(form) {
            var dialog = form.closest('.ui-jqdialog');
            var buttons = dialog.find('.EditTable')
            buttons.find('.EditButton a[id*="_reset"]').addClass('btn btn-sm btn-info').find('.ui-icon').attr('class', 'ace-icon fa fa-retweet');
            buttons.find('.EditButton a[id*="_query"]').addClass('btn btn-sm btn-inverse').find('.ui-icon').attr('class', 'ace-icon fa fa-comment-o');
            buttons.find('.EditButton a[id*="_search"]').addClass('btn btn-sm btn-purple').find('.ui-icon').attr('class', 'ace-icon fa fa-search');
        }

        function beforeDeleteCallback(e) {
            var form = $(e[0]);
            if(form.data('styled')) return false;

            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_delete_form(form);

            form.data('styled', true);
        }

        function beforeEditCallback(e) {
            var form = $(e[0]);
            form.closest('.ui-jqdialog').find('.ui-jqdialog-titlebar').wrapInner('<div class="widget-header" />')
            style_edit_form(form);
        }



        //it causes some flicker when reloading or navigating grid
        //it may be possible to have some custom formatter to do this as the grid is being created to prevent this
        //or go back to default browser checkbox styles for the grid
        function styleCheckbox(table) {
            /**
             $(table).find('input:checkbox').addClass('ace')
             .wrap('<label />')
             .after('<span class="lbl align-top" />')


             $('.ui-jqgrid-labels th[id*="_cb"]:first-child')
             .find('input.cbox[type=checkbox]').addClass('ace')
             .wrap('<label />').after('<span class="lbl align-top" />');
             */
        }


        //unlike navButtons icons, action icons in rows seem to be hard-coded
        //you can change them like this in here if you want
        function updateActionIcons(table) {
            /**
             var replacement =
             {
                 'ui-ace-icon fa fa-pencil' : 'ace-icon fa fa-pencil blue',
                 'ui-ace-icon fa fa-trash-o' : 'ace-icon fa fa-trash-o red',
                 'ui-icon-disk' : 'ace-icon fa fa-check green',
                 'ui-icon-cancel' : 'ace-icon fa fa-times red'
             };
             $(table).find('.ui-pg-div span.ui-icon').each(function(){
					var icon = $(this);
					var $class = $.trim(icon.attr('class').replace('ui-icon', ''));
					if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
				})
             */
        }

        //replace icons with FontAwesome icons like above
        function updatePagerIcons(table) {
            var replacement =
            {
                'ui-icon-seek-first' : 'ace-icon fa fa-angle-double-left bigger-140',
                'ui-icon-seek-prev' : 'ace-icon fa fa-angle-left bigger-140',
                'ui-icon-seek-next' : 'ace-icon fa fa-angle-right bigger-140',
                'ui-icon-seek-end' : 'ace-icon fa fa-angle-double-right bigger-140'
            };
            $('.ui-pg-table:not(.navtable) > tbody > tr > .ui-pg-button > .ui-icon').each(function(){
                var icon = $(this);
                var $class = $.trim(icon.attr('class').replace('ui-icon', ''));

                if($class in replacement) icon.attr('class', 'ui-icon '+replacement[$class]);
            })
        }

        function enableTooltips(table) {
            $('.navtable .ui-pg-button').tooltip({container:'body'});
            $(table).find('.ui-pg-div').tooltip({container:'body'});
        }

        $(document).one('ajaxloadstart.page', function(e) {
            $('#treegrid').jqGrid('GridUnload');
            $('.ui-jqdialog').remove();
        });
    });
});
</script>
